import React from 'react';
import {toJS} from "mobx";
import {inject, observer} from "mobx-react";
import {withRouter, Route} from 'react-router-dom';
import {List, Radio, WhiteSpace,Tools,Bubble} from 'weaver-mobile';
import {RouteLayout} from 'weaver-mobile-page';
import {queryUrlString} from '../../util/CommonUtil';
import './style/index';
import * as OdocEmSDK from "../../util/OdocEmSDK";
const RadioItem = Radio.RadioItem;
const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;
const winWidth = document.body.clientWidth;
@withRouter
@inject("odocSignApprovalStore", "odocComsStore")
@observer
class Index extends React.Component {

    componentWillMount() {
        OdocEmSDK.setOdocNavTitle(getLabel('502492','查看历史版本'));
        const {odocSignApprovalStore} = this.props;
        let {getQianPiDatas, histroyDocs,setProperty} = odocSignApprovalStore;
        if (toJS(histroyDocs).length == 0) {
            // this.hiddenOdocDefaultTools();
            setProperty({isNewHistory:true,isSDK:1});
            getQianPiDatas(queryUrlString());
        }

    }

    componentWillUnmount() {
        let {requestname} = this.props.odocSignApprovalStore;
        OdocEmSDK.setOdocNavTitle(requestname);
    }

    hiddenOdocDefaultTools = ()=>{
        let times = 0;
        let timer = setInterval(function () {
            times++;
            let tabbarDom = document.getElementsByClassName("am-tab-bar");
            if(tabbarDom.length>0){
                clearInterval(timer);
                tabbarDom[0].style.display = "none";
            }else if(times>=50){
                clearInterval(timer);
            }
        },100)
    }

    addIframeClickEvent = () => {
        let {historyDatas, historyVersionId, historyImagefileId, setProperty, isViewHistory} = this.props.odocSignApprovalStore;
    }

    getSelectHistoryVersionComp=()=>{
        let {history} = this.props;
        let {isNewHistory,histroyDocs, historyPdfs, historyVersionId,historyFileId, historyVersionName, historyImagefileId,
            setProperty, isShowH, isViewHistory, historyDocName,isUsePDFViewer,convertFile} = this.props.odocSignApprovalStore;
        let historyPdfLen = toJS(historyPdfs).length;
        let historyDocsLen = toJS(histroyDocs).length;
        const btns = [
            {
                key: 'submit',
                text: getLabel('826','确定'),
                onClick: () => {
                    setProperty({isViewHistory: true});
                    document.title = historyVersionName;
                    this.addIframeClickEvent();
                    if(isUsePDFViewer==true){
                        convertFile();
                    }
                },
                type: 'primary',
            },
        ];
        return <div>
            <List>
                {toJS(histroyDocs).map((item,index) => {
                    return <RadioItem key={item.logid} checked={historyVersionId === item.logid}
                                      onChange={() => {
                                          let datas = item.imagefileEntities;
                                          setProperty({
                                              historyPdfs: datas,
                                              historyDocName: datas[0].imagefilename,
                                              historyImagefileId: datas[0].encodeimagefileid,
                                              imagefileid:datas[0].imagefileid,
                                              historyVersionId: item.logid,
                                              historyFileId:datas[0].id,
                                              historyVersionName: item.versionName+"(V"+(historyDocsLen-index)+")"
                                          })
                                      }}>
                        V{historyDocsLen-index}：{item.versionName}
                    </RadioItem>
                })}
            </List>
            <ButtonGroup data={btns} isButton={true}/>
        </div>
    }

    getHistoryPdfMenu = ()=>{
        let {history} = this.props;
        let {isNewHistory,histroyDocs, historyPdfs, historyVersionId,historyFileId, historyVersionName, historyImagefileId,
            setProperty, isShowH, isViewHistory, historyDocName,isUsePDFViewer,convertFile,isDownload} = this.props.odocSignApprovalStore;
        let historyPdfLen = toJS(historyPdfs).length;
        let historyDocsLen = toJS(histroyDocs).length;
        return <div className={"haoqian-top-left-menu"}>
            <ul>
                {
                    toJS(historyPdfs).map(item => {
                        let filename = item.imagefilename.replace(".pdf", "");
                        return <li
                            className={historyFileId == item.id ? "wea-haoqian-qp-select" : ""}
                            onClick={() => {
                                setProperty({
                                    historyImagefileId: item.encodeimagefileid,
                                    imagefileid:item.imagefileid,
                                    historyDocName: item.imagefilename,
                                    historyFileId:item.id,
                                    isShowH: false
                                });
                                if(isUsePDFViewer==true){
                                    convertFile();
                                }else {
                                    document.getElementById("haoqianPdf").parentNode.removeChild(document.getElementById("haoqianPdf"));
                                    let pdfIframe = document.createElement('iframe');
                                    pdfIframe.id = "haoqianPdf";
                                    pdfIframe.src =  "/docs/pdfview/web/pdfViewer.jsp?canPrint=false&canDownload=false&pdfimagefileid=" + item.encodeimagefileid;
                                    pdfIframe.style.width = "100%";
                                    pdfIframe.style.height = "100%";
                                  document.getElementById("haoqianpdfboxinner").appendChild(pdfIframe);
                                }
                                this.addIframeClickEvent();
                            }
                            }>{filename}</li>
                    })
                }
            </ul>
        </div>
    }

    render() {
        let {history} = this.props;
        let {isNewHistory,histroyDocs, historyPdfs, historyVersionId,historyFileId, historyVersionName, isDownload,
          historyImagefileId, setProperty, isShowH, isViewHistory, historyDocName,downloadBtnName} = this.props.odocSignApprovalStore;
        let historyPdfLen = toJS(historyPdfs).length;
        let historyDocsLen = toJS(histroyDocs).length;
        let pdfHeight = 0;
        if(historyPdfLen>1){
          pdfHeight+=45;
        }
        if(isDownload==true){
          pdfHeight+=55;
        }
        return (
            <div style={{height: `${isNewHistory?"calc(100% + 50px)":"100%"}`}} className={"wea-haoqian-history-version"}>
                {
                    !isViewHistory && this.getSelectHistoryVersionComp()
                }
                {isViewHistory && <div style={{height: "100%"}} className={"haoqianpdfbox"}>
                    {
                        historyPdfLen>1 && <div className={"wea-haoqian-header"}>
                            <div className={"haoqian-top-left"} onClick={(e) => {
                                e.stopPropagation();
                                e.preventDefault()
                            }}>
                                <div className={"title"} onClick={(e) => {
                                    e.preventDefault();
                                    if(historyPdfLen>1){
                                        setProperty({isShowH: !isShowH})
                                    }
                                }}>
                                    <span style={{maxWidth:`${winWidth-75}px`}}>{historyDocName.replace(".pdf", "")}</span>
                                    <i className={`icon-haoqian-${isShowH ? "up" : "down"}`}></i>
                                </div>
                                {isShowH && this.getHistoryPdfMenu()}
                            </div>
                        </div>
                    }
                    <div style={{height: `calc(100% - ${pdfHeight}px)`}} id={"haoqianpdfboxinner"} onClick={()=>{setProperty({isShowH: false});}}>
                      <iframe id='haoqianPdf'
                              src={`/docs/pdfview/web/pdfViewer.jsp?canPrint=false&canDownload=false&pdfimagefileid=${historyImagefileId}`}
                              style={{width: "100%", height: "100%"}}></iframe>
                    </div>
                  {isDownload==true && <div className={"wea-mobile-haoqian-button1 wea-mobile-haoqian-history-download"} onClick={()=>{
                    let url = "/weaver/weaver.file.FileDownload?fileid="+historyImagefileId+"&download=1";
                    Tools.getWeaverFile(url);
                  }} ><i className={"icon-haoqian-download"}></i>{downloadBtnName==""? getLabel('258', '下载'):downloadBtnName}</div>}
                </div>}
            </div>
        );
    }
}

export default Index;